<template>
    <div id="mapchart">
        <div id="map"></div>
    </div>
</template>
<script>
import {AreaMapChart} from './AreaMapChart'
export default {
  data () {
    return {
      jsonUrl: './static/data/China.json',
      chart: '',
      data: []
    }
  },
  mounted () {
    this.chart = new AreaMapChart('map')
    this.getData()
  },
  methods: {
    getData () {
      this.$http.get(this.jsonUrl).then(data => {
        data = data.data
        this.chart.jsonData = data
        this.chart.draw()
      })
    }
  }
}
</script>
<style scoped>
#mapchart {
    height: 100%;
    width: 100%;
}
#map {
    height: 100%;
    width: 100%;
}
</style>
